<template>
  <el-tag  :type="type">{{label}}</el-tag>
</template>

<script setup lang="ts">
import {DictDataModel} from "/@/api/system/model/DictModel";
import {PropType, ref, watch} from "vue";
const props = defineProps({
  value: {
    type: [String,Number,Boolean],
    required: true
  },
  dict: {
    type: Array as PropType<DictDataModel[]>,
    default: []
  },
  type: {
    type: String,
    default: 'primary'
  },
  label: {
    type: String,
    default: ''
  }
})
const type = ref(props.type);
const label = ref("")
/**
 * 渲染Label
 * @param dict
 * @param value
 */
const applyLabel = (dict: DictDataModel[],value: String | Number | Boolean) => {
  if(dict && dict.length > 0){
    let dictValue = dict.find(res=> res.value == value);
    label.value = dictValue ? dictValue.label : ''
    type.value = dictValue ? dictValue.tag !== 'primary'? dictValue.tag : '' : ''
  }
}
watch(
    () => props.value,
    (newValue) => {
       if(props.dict && props.dict.length > 0){
         applyLabel(props.dict,newValue)
       }else{
         label.value = ''
         type.value = ""
       }
    },
    {  immediate: true }
);

watch(
    () => props.label,
    (newValue) => {
      if(newValue){
        label.value = newValue
      }
    },
    {  immediate: true }
);
watch(() => props.dict,(newValue) => {
  if(newValue){
    applyLabel(newValue,props.value)
  }else{
    label.value = ''
  }

},{deep: true})

</script>

<style scoped>

</style>